<template>
  <div>
    <loader v-if="!comment"></loader>
    <div v-else>
      <div v-if="comment.hotComments.length !== 0">
        <sort-bar>
          <template #left>精彩评论</template>
        </sort-bar>
        <comment-item
          v-for="(item,index) in comment.hotComments"
          :key="item.commentId"
          :comment="item"
          :class="{noborder: index === comment.hotComments.length-1}"
        ></comment-item>
      </div>
      <sort-bar>
        <template #left>最新评论</template>
      </sort-bar>
      <comment-item
        v-for="(item,index) in comment.comments"
        :key="index"
        :comment="item"
        :class="{noborder: index === comment.comments.length-1}"
      ></comment-item>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="comment.total"
        :page-size="20"
        @current-change="pageChange"
        @prev-click="pageChange"
        @next-click="pageChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import SortBar from '@/components/content/sortbar/SortBar'
import Loader from '@/components/common/loader/Loader'

import CommentItem from './CommentItem'

import { _getComment } from '@/network/songdetail'

export default {
  components: {
    SortBar,
    Loader,
    CommentItem
  },
  props: {
    comment: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    pageChange(page) {
      this.$emit('pageChange', page)
    }
  }
}
</script>

<style scoped>
.sort-bar {
  border-bottom: 1px solid #666;
}
.sort-bar >>> .left {
  color: #222;
  font-weight: 700;
  font-size: 14px;
  text-align: left;
}

.comment-item:nth-last-child(1) {
  border: none;
}

.noborder {
  border: none;
}

/* 修改页码默认样式 */
.el-pagination {
  padding: 0 70px;
  margin: 20px auto 0 !important;
}
.el-pagination >>> .number,
.el-pagination >>> .btn-prev,
.el-pagination >>> .btn-next,
.el-pagination >>> .more {
  border: 1px solid #ddd !important;
  background: #fff !important;
}
.el-pagination >>> .number:hover,
.el-pagination >>> .more:hover {
  border-color: #e1151d !important;
  color: #e1151d !important;
}
.el-pagination >>> .active {
  background-color: #e1151d !important;
  border-color: #e1151d !important;
}
.el-pagination >>> .active:hover {
  color: #fff !important;
}
</style>